<template>
  <el-dialog :model-value="props.visible" append-to-body titile="选择你要用的公司">
    <div class="cplist">
      <el-table :data="tableData" style="width: 100%; height: 100%" @row-click="handleRowClick">
        <el-table-column prop="id" label="公司id" width="180" />
        <el-table-column prop="name" label="公司名称" width="180" />
        <!-- <el-table-column prop="areaid" label="公司所在区域">
          <template #default="{ row }">
            {{ row.areaid }}
          </template>
        </el-table-column> -->
        <el-table-column prop="isVue" label="是否使用vue">
          <template #default="scope">
            {{ scope.row.isVue ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column prop="isReact" label="是否使用React">
          <template #default="scope">
            {{ scope.row.isReact ? '是' : '否' }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        small
        background
        layout="prev, pager, next,sizes"
        :total="total"
        class="mt-4"
        :page-sizes="[5, 10, 30, 50]"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import {
  defineProps, defineEmits, reactive, ref, computed, onMounted,
} from 'vue';
import { showMsg } from '@/util/toast';
import { getCompanyList } from '@/api/company';

// 我这个组件需要接收什么外部传递进来的值
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['change']); // 声明组件上支持的自定义事件

// 分页的总数
const total = ref(0);

// 表格数组
const tableData = ref([]);

// 获取公司列表在
const $limit = ref<number>(20); // 一页显示的数量多少
const curPage = ref<number>(1); // 当前的页码
const $skip = computed(() => (curPage.value - 1) * $limit.value);

const handleSizeChange = (size: number) => {
  $limit.value = size;
  getList();
};
const handlePageChange = (curPage: number) => {
  //   curPage.value = curPage;
  console.log(curPage);
};

const getList = async () => {
  const res = await getCompanyList({
    $limit: $limit.value,
    $skip: $skip.value,
  });
  const { statusText, data } = res;
  if (statusText !== 'OK') return showMsg('获取列表失败');
  tableData.value = data.data;
  total.value = data.total;
};
// 挂载完成之后执行一次
onMounted(() => {
  getList();
});

// 当表格某一行被点击的时候
const handleRowClick = (row) => {
  console.log('rowis', row);
  emit('change', { ...row });
};
</script>

<script lang="ts">
export default {
  name: 'companyPicker',
};
</script>

<style scoped lang="scss">
.cplist {
  width: 500px;
  height: 400px;
}
</style>
